<template>
  <div class="box">
    <div class="topBar">
      <div @mouseenter="hover" @mouseleave="hoverLeave">
        <div class="item item_">全部商品分类</div>
        <!-- 定义一个动画标签name要与执行动画的样式名一样,有v-show或者v-if才会有 -->
        <transition name="botBar">
          <!-- 避免卡顿加入事件委派 -->
          <!-- 使用data-xxx可以存入额外的信息 -->
          <!-- 设置data-name作为查询参数 -->
          <!-- 使用data-floor作为区分楼层 -->
          <!-- 要拿到dom节点的话就不能往点击事件中传参 -->
          <div class="botBar" @click="goSearch" v-show="show">
            <div
              v-for="item in categoryList"
              :key="item.categoryId"
              :data-categoryName="item.categoryName"
              :data-category1Id="1"
              class="botBox"
            >
              {{ item.categoryName }}
              <div
                class="itemBox"
                v-for="item2 in item.categoryChild"
                :key="item2.categoryId"
              >
                <div
                  class="title"
                  :data-categoryName="item2.categoryName"
                  :data-category2Id="2"
                >
                  {{ item2.categoryName }}
                </div>
                <div class="fontBox">
                  <div
                    class="font"
                    v-for="item3 in item2.categoryChild"
                    :key="item3.categoryId"
                    :data-categoryName="item3.categoryName"
                    :data-category3Id="3"
                  >
                    {{ item3.categoryName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div style="display: flex">
        <div class="item">服装城</div>
        <div class="item">美妆馆</div>
        <div class="item">尚品汇超市</div>
        <div class="item">全球购</div>
        <div class="item">闪购</div>
        <div class="item">团购</div>
        <div class="item">有趣</div>
        <div class="item">秒杀</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { throttle } from "lodash"; //引入节流,有的插件可能需要使用节流所以就引入了lodash插件就不需要安装了
//三级联动
export default {
  name: "TypeNav",
  created() {
    if (this.$route.path !== "/home") {
      this.show = false;
    }
  },
  data() {
    return {
      show: true,
    };
  },
  computed: {
    ...mapState({
      //拿到其中一个仓库中的值
      categoryList: (state) => state.home.categoryList,
    }),
  },
  methods: {
    //操作太快时间太短，没办法解析会出现卡顿需要引入防抖和节流
    //防抖:用户点击多次但是只执行一次
    //节流:用户操作很频繁,可以把频繁的操作变成少量的操作
    //显示侧边栏
    hover: throttle(function () {
      if (this.show === false) {
        this.show = true;
      }
    }, 50),

    //隐藏侧边栏
    hoverLeave: throttle(function () {
      if (this.$route.path !== "/home" && this.show === true) {
        this.show = false;
      }
    }, 50),

    //跳转到搜索页面
    goSearch(e) {
      console.log(e.target.dataset)
      // 使用dataset拿到data-xxx中的值,并且结构赋值,定义的变量必须要跟data-xxx中的一样才能匹配上
      let { categoryname, category1id, category2id, category3id } =
        e.target.dataset;
      let query = {};
      query.categoryName = categoryname;
      if (category1id) {
        query.category1Id = category1id;
      } else if (category2id) {
        query.category2Id = category2id;
      } else {
        query.category3Id = category3id;
      }

      let loction = {
        name: "search",
        query: query,
      };

      //存在params参数的时候在跳转的时候带上
      if (this.$route.params) {
        loction.params = this.$route.params;
      }

      this.$router.push(loction);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  .topBar {
    display: flex;
    .item_ {
      margin-right: 10px;
      background-color: #e1251b;
      color: #fff;
      font-weight: 700;
      width: 170px;
      text-align: center;
    }
    .item {
      padding: 0 25px;
      font-size: 16px;
      line-height: 45px;
      cursor: pointer;
    }
  }
  .botBar {
    font-size: 15px;
    width: 220px;
    height: 450px;
    background-color: #fafafa;
    color: #000;
    font-weight: 700;
    position: absolute;
    top: 45px;
    z-index: 999;
    div {
      padding: 0 10px;
      line-height: 26.5px;
      cursor: pointer;
    }
  }

  .botBox:hover {
    background: skyblue;
    .itemBox {
      display: block;
    }
  }

  //动画开始的状态
  .botBar-enter {
    height: 0px;
  }

  //动画结束的状态
  .botBar-enter-to {
    height: 450px;
  }

  //动画的时间和速率
  .botBar-enter-active {
    transition: all 0.5s linear;
  }

  .itemBox {
    display: none;
    position: absolute;
    width: 784px;
    top: 0px;
    left: 220px;
    height: 431px;
    background: #fafafa;
    border: 1px solid #eee;
    padding: 8px 8px !important;
    z-index: 999;
    .title {
      font-size: 10px;
      font-weight: 600;
      padding-right: 8px;
      float: left;
    }
    .fontBox {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .font {
        font-size: 10px;
        border-left: 1px solid #ccc;
        padding: 0 8px;
        font-weight: 400;
        margin-bottom: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>